/*
* @Author:jason
* @Date:   2017-03-13 02:23:55
* @Last Modified by:   Administrator
* @Last Modified time: 2017-03-13 02:34:07
* 原理：为说有的li列表中的a元素添加onmouseover函数
* 遍历所有a标签，将当前src的小图路径应用到大图的路径上，并将小图的40改为400；
*  .网页代码：
*  <div id="picMain">
	<img src="img/tb1400.jpg" height="397" width="399">
		<ul id="picThumb">
			<li><a href="#"><img src="img/tb140.jpg"></a></li>
			<li><a href="#"><img src="img/tb240.jpg"></a></li>
			<li><a href="#"><img src="img/tb340.jpg"></a></li>
			<li><a href="#"><img src="img/tb440.jpg"></a></li>
		</ul>
	</div>
   .css代码
   <style>
	ul{
		padding: 0;
		margin: 0;
	}
	ul li{
		list-style:none;
		float:left;
		margin-right:10px;
	}
	#picThumb li img{
	border:2px #fff solid;
	}

</style>


* 以下为js代码，复制即可 
*/


	window.onload = function(){
		// 为所有的ul>li>a添加onmouseover事件响应函数
		var allThumbs = document.getElementById("picThumb").getElementsByTagName("a");
		var imgMain = document.getElementById("picMain").getElementsByTagName("img")[0];
		alert(imgMain);
		// 遍历说有的a标签
		// alert(allThumbs.length);
		for (var i = 0; i < allThumbs.length; i++) { // 遍历说有的a标签
			allThumbs[i].onmouseover = function(){  // 并为它添加响应函数onmouseover
				var imgThumb = this.getElementsByTagName("img")[0];
					imgMain.src = imgThumb.src.replace("40","400");
					// 先讲原来的边框变为默认
					thumbReset();
					// 讲缩略图的边框变为红色
					imgThumb.style.borderColor = "#ff0000";
			}
		}
		function thumbReset(){
		// 先找到所有的ul-li-img
		// var imgThumbs = document.getElementById("picThumb").getElementsByTagName("img");
		var imgThumbs = document.getElementById("picThumb").querySelectorAll("img");

		for (var i = 0;i<imgThumbs.length; i++) {

			imgThumbs[i].style.borderColor = "#fff";
		}
		

		// 然后遍历每一个ul-li-img,修改其边框颜色

	}	

	};

	//恢复默认的颜色
	function thumbReset(){
		// 先找到所有的ul-li-a
		
	imgThumb.style.borderColor = "#fff";

		// 然后遍历每一个ul-li-a,修改其边框颜色

	}
